<template>
    <view class="container">
        <view class="comment-title">
            共{{commentList.length}}条评论
        </view>
		<view class="commont-text">
			<input type="text" @confirm="submitComment" v-model="commentContent" placeholder="说点什么, 让ta也认识看笔记的你"/>
		</view>
      <!-- 评论列表 -->
      <view v-for=" (item,index) in commentList" :key="index" class="comment-list">
		<view class="comment-item-top">
			<image class="comment-item-img" :src="item.commentorAvatar"></image>
			<text>{{item.commentor}}</text>
		</view>
		<view class="comment-content-box">
			<text class="comment-content">{{item.commentContent}}</text>
			<text class="comment-time">{{item.commentTime}}</text>
		</view>
      </view>
      
      <!-- 评论输入框 -->
      <view class="comment-input">
		<uni-easyinput v-model="comment.commentContent" placeholder="说点什么..." prefix-icon="compose" @iconClick="submitComment(1)"/>
        <view class="comment-stats">
          <uni-icons type="chat" size="25" color="#666" />
          <text class="stat-text">{{commentList.length}}</text>
          <uni-icons type="hand-up" size="25" color="#666" />
          <text class="stat-text">{{likeCount}}</text>
        </view>
      </view>
    </view>
  </template>
  
<script>
  import { 
	  addComment,
	  getCommentList ,
	} from '@/api/comment/index.js'
  import uniCard from '@/uni_modules/uni-card/components/uni-card/uni-card.vue'
  import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue'
  import dayjs from 'dayjs';
  
  export default {
    components: {
      uniCard,
      uniEasyinput
    },
    data() {
      return {
        // 评论列表
        commentList: [],
        likeCount: uni.getStorageSync('science').likes,
		commentContent: '',
		comment: {
			scId: uni.getStorageSync('science').scId,
			commentor: uni.getStorageSync('patient').name,
			commentorAvatar: uni.getStorageSync('patient').avatar,
			commentContent: ''
			},
		}
    },
    onLoad() {
      this.listComments();
      // 动态设置标题
      uni.setNavigationBarTitle({
        title: ''
      })
    },
    methods: {
      // 获取评论列表
      listComments() {
        getCommentList(this.comment.scId).then(res => {
          this.commentList = res.data
		  for(let i = 0; i < this.commentList.length; i++) {
			  this.commentList[i].commentTime = dayjs(this.commentList[i].commentTime).format('YYYY-MM-DD HH:mm:ss')
		  }
        })
      },
      // 提交评论
      submitComment(type) {
		if(type==1){
			if (!this.comment.commentContent.trim()) {
			  uni.showToast({
			    title: '评论内容不能为空',
			    icon: 'none'
			  })
			  return
			}
		}else{
			if (!this.commentContent.trim()) {
			  uni.showToast({
			    title: '评论内容不能为空',
			    icon: 'none'
			  })
			  return
			}
			this.comment.commentContent = this.commentContent
		}
        
        addComment(this.comment).then(() => {
          this.comment.commentContent = ''
          this.listComments()
          uni.showToast({
            title: '评论成功'
          })
        })
      },
    }
  }
</script>
  
  <style lang="scss">
  .container {
    padding: 20rpx;
    border-top: 1px solid #f0f0f0;
  }
  
  .comment-content {
	  line-height: 24px;
  }
  
  .comment-time{
	  margin-left: 20px;
	  font-size: 30rpx;
	  color: #999999;
  }
  
  .comment-content-item--box{
  	  margin-top: -10px;
  	  margin-left: 50px;
  	  height: 66px;
  	  font-size: 30rpx;
  	  color: #333333;
  }
  
  .comment-content-box{
	  margin-top: -10px;
	  margin-left: 50px;
	  // height: 66px;
	  font-size: 30rpx;
	  color: #333333;
	  border-bottom: 1px solid #E5E5E5;
	  padding-bottom: 20rpx;
  }
  
  .comment-item-top{
	  display: flex;
	  align-items: center;
	  // margin-bottom: 20rpx;
	  text{
		  font-size: 30rpx;
		  color: #999999;
	  }
  }
  
  .comment-item-img{
	  margin-top: 30px;
	  display: flex;
	  align-items: center;
	  width: 90rpx;
	  height: 90rpx;
	  border-radius: 50%;
	  overflow: hidden;
	  margin-right: 20rpx;
	  image{
		  width: 100%;
		  height: 100%;
	  }
  }
  
  .commont-text{
	  margin-top: 10px;
	  background-color: #F2F2F2;
	  input{
		  width: 100%;
		  height: 80rpx;
		  border-radius: 10rpx;
		  padding-left: 20rpx;
		  font-size: 28rpx;
		  color: #999999;
	  }
  }

  .comment-title{
    font-size: medium;
    color: #989899;
    margin-top: 10px;
  }

  .comment-list {
    .uni-card {
      margin-bottom: 20rpx;
      border-radius: 12rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
      
      &__header {
        background-color: #1890ff;
        color: #fff;
        padding: 20rpx;
        border-radius: 12rpx 12rpx 0 0;
      }
      
      &__content {
        padding: 20rpx;
        color: #333;
      }
    }
  }
  
  .comment-input {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    gap: 30rpx;
    box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.08);
    
    .comment-stats {
      display: flex;
      align-items: center;
      gap: 30rpx;
      margin-right: 30rpx;
      min-width: 120rpx;
      
      .stat-text {
        font-size: 14px;
        color: #666;
        min-width: 30rpx;
      }
    }
    
    button {
      background-color: #1890ff;
      color: #fff;
      border-radius: 8rpx;
    }
  }
  </style>